<!-- 定义模版对象 -->
<template>
  <el-container id="all_box">
    <el-header height="45px">
      <el-row class="header_row">
        <el-col :span="2" :offset="3" class="home_page">
          <el-link href="searched" target="_self" icon="el-icon-house">主页</el-link>
        </el-col>
        <el-col :span="2" :offset="1" class="home_page">
          <el-link href="#" target="_blank">关于本站</el-link>
        </el-col>

        <el-col :span="6" :offset="2" class="search_input">
          <el-input type="text" v-model="query" placeholder="搜索书籍. . ." @keyup.enter.native="gosearch" clearable>
          </el-input>
        </el-col>

        <el-col :span="2" :offset="3" class="user_col" v-if="this.$store.getters.getUserLoginState">
          <el-dropdown :hide-on-click="false" placement="right-end">
            <span class="el-dropdown-link home_page">
              <!-- <i class="el-icon-user" style="color: white;"></i> -->
              <el-link href="center" target="_self" icon="el-icon-user">{{this.$store.getters.getUserName}}</el-link>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <!-- <el-button @click="gotoUserCenter">个人中心</el-button> -->
                  <el-link :underline="false" href="center" >消息中心</el-link>
                  <el-badge class="mark" :value="messageNum" v-if="messageNum > 0"/>
                </el-dropdown-item>
                <el-dropdown-item class="clearfix">
                  <el-link :underline="false" href="center?type=4">收藏夹</el-link>
                  <el-badge class="mark" :value="collectionNum" v-if="collectionNum > 0"/>
                </el-dropdown-item>
                <el-dropdown-item divided >
                  <span @click="logout()">退出登录</span>
                </el-dropdown-item>

              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>

        <el-col :span="2" :offset="1" class="home_page" v-if="this.$store.getters.getUserId == 1" >
          <el-link href="home" >admin入口</el-link>
        </el-col>

        <el-col :span="2" :offset="3" class="home_page" v-if="this.$store.getters.getUserId == 0" >
          <el-link href="login" >登录/注册</el-link>
        </el-col>

      </el-row>
    </el-header>
    <el-container>
      <el-aside id="el_aside_left" width="250px">

        <el-row>
          <el-col :span="12" :offset="5">
            <el-menu unique-opened router collapse-transition background-color="transparent" text-color="black"
              active-text-color="#475164" @open="handleOpen" @close="handleClose">
              <el-submenu :index="menu.stageId+''" v-for="menu in menuList" :key="menu.id">
                <template slot="title">
                  <i class="el-icon-right"></i>
                  <span>{{menu.name}}</span>
                </template>
                <el-submenu :index="childrenMenu.stageId+''" v-for="childrenMenu in menu.children"
                  :key="childrenMenu.id">
                  <template slot="title">
                    <span>{{childrenMenu.name}}</span>
                  </template>
                  <el-submenu :index="grandsonMenu.stageId+''" v-for="grandsonMenu in childrenMenu.children"
                    :key="grandsonMenu.id">
                    <template slot="title">
                      <span>{{grandsonMenu.name}}</span>
                    </template>
                  </el-submenu>
                </el-submenu>
              </el-submenu>
            </el-menu>

          </el-col>
        </el-row>
      </el-aside>

      <el-main>

        <router-view></router-view>

      </el-main>
      <el-aside id="el_aside_right" width="200px">
      </el-aside>
    </el-container>
  </el-container>
</template>

<!-- 定义JS变量 -->
<script scoped>
  export default {
    name: 'index_page',
    components: {},
    created() {
      // alert(this.$bus.USER_ID)
      this.getMenuList()
      // this.setUserId(1)
      if(window.sessionStorage.getItem('userId') == null){
        this.$store.commit('refreshUserId', 0)
      }else{
        this.$store.commit('refreshUserId', window.sessionStorage.getItem('userId'))
        this.$store.commit('refreshUserName', window.sessionStorage.getItem('userName'))
      }

      // this.setUserFlag()
      // this.$store.dispatch('setUserLoginStateFun')
	    this.$store.commit('setUserLoginState')
      this.initUserInfo()
      console.log(this.$route.path)
    },
    mounted() {
            this.getMessageNum();
            this.timer = window.setInterval(() => {
                setTimeout(() => {
                    this.getMessageNum()
                },0)
            },3000)
        },
    data() {
      return {
        // user_flag: false,
        user_flag: false,
        query: '',
        isCollapse: true,
        menuList: [],
        collectionNum: this.$store.getters.getCollectionNum,
        messageNum: 5
      }
    },
    methods: {
      gosearch() {
        this.$store.commit('refreshQueryStore', this.query)
        // this.query = this.$store.getters.getQuery
      },
      async getMenuList() {
        const {
          data: res
        } = await this.$http.get('/book/getmenulist')
        if (res.status !== 200) return this.$message.error('书籍菜单查询失败')
        this.menuList = res.data
        console.log(this.menuList)
      },
      async initUserInfo(){
        const {
          data: res
        } = await this.$http.get(`/book/getUserInfo/${this.$store.getters.getUserId}`)
        if (res.status !== 200) return this.$message.error('书籍菜单查询失败')
        console.log("总收藏数"+res.data)
        this.$store.commit('refreshCollectionNum',res.data)
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
        if (this.$route.path !== '/searched') {
          this.$router.push('/searched')
        }
        // setTimeout(function(x){
        //   this.$store.commit('refreshSearchQueryType',x)
        //   alert("alert:  "+x)
        //   // this.$router.push('/login')
        // },1000,key)
        // console.log("22222222222")
        this.$store.commit('refreshSearchQueryType', key)
        // console.log("handopen"+this.$store.getters.getQueryType)

      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
        this.$store.commit('refreshSearchQueryType', key)
      },
      gotoUserCenter(){
        window.open("/center")
      },
      logout(){
        window.sessionStorage.clear()
        this.$store.commit('refreshUserId',0)
        //2.用户访问登录页面
        this.$router.push('/login')
      },
      async getMessageNum(){
        const {data: res} = await this.$http.get(`/msg/getMessageNum/${window.sessionStorage.getItem('userId')}`)
        this.messageNum = res.data
        console.log(res.data)
      }
    },
    watch: {
      newUserCollNum: function(){
        // alert("kkkkkk")
        this.collectionNum = this.$store.getters.getCollectionNum
      }
    },
    computed: {
      newUserCollNum: function(){
        return this.$store.getters.getCollectionNum
      }
    }
  }
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
  html,
  #app,
  .el-container {
    /*设置内部填充为0，几个布局元素之间没有间距*/
    padding: 0px;
    /*外部间距也是如此设置*/
    margin: 0px;
    /*统一设置高度为100%*/
    // height: 100%;
    // position: relative;
    // background-color: #8BC6EC;
    // background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);

  }

  #all_box {
    position: relative;

    // height: 100vh;
    // width: 100%;
    background-size: cover;
    margin-top: 0px;

    .el-header {
      line-height: 30px;
      background-color: #1d1d1f; //#303030

      .header_row {
        position: relative;
        top: 5px;

        .home_page {
          a {
            color: white;
            text-decoration: none;

            i {
              color: white;
            }
          }
        }

        .search_input {
          .el-input {
            // height: 40px;
            min-height: 30px;
            height: 35px;
          }

        }

        .user_col {

          .el-dropdown-link {
            cursor: pointer;
            color: #070001;
            font-size: 25px;
          }

          .el-icon-arrow-down {
            font-size: 12px;
          }
        }


      }
    }

    #el_aside_left {

      // background-color: red;
      .el-row {
        position: relative;
        top: 80px;

        .el-menu {
          //设置居中
          text-align: left;
          //设定字符间距
          letter-spacing: 4px;
          border-right-color: white;
          min-width: 160px;

          .el-submenu {
            // text-align: center;
            background: transparent;
            min-width: 160px;

            .el-menu-item {
              // text-align: right;
              min-width: 160px;
            }
          }

        }
      }
    }

    .el-main {
      // background-color: gray;

    }

    #el_aside_right {}

  }

  ::v-deep .el-input__inner {
    height: 30px;
  }
</style>
